<template>
  <div>
    <div style="margin-top: 10px">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Condition Search</span>
          </div>
        </template>
        <el-form
          :inline="true"
          :model="searchInfo"
          class="demo-form-inline"
          ref="searchInfo"
        >
          <el-row>
            <el-form-item label="Ques Name:" prop="ques_name">
              <el-input
                style="width: 260px"
                v-model="searchInfo.ques_name"
                placeholder="please input questionnaire name"
              ></el-input>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="Province:" prop="province">
              <el-select
                style="width: 220px"
                v-model="searchInfo.province"
                placeholder="please select province"
              >
                <el-option label="上海市" value="shanghai"></el-option>
                <el-option label="北京市" value="beijing"></el-option>
                <el-option label="陕西省" value="shanxi"></el-option>
              </el-select>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="Create Time:" prop="creat_time">
              <el-date-picker
                v-model="searchInfo.creat_time"
                type="datetimerange"
                range-separator="to"
                start-placeholder="Start time"
                end-placeholder="End time"
              >
              </el-date-picker>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item label="State:" prop="state">
              <el-select
                style="width: 270px"
                v-model="searchInfo.province"
                placeholder="please select questionnaire state"
              >
                <el-option
                  label="To be Submitted"
                  value="to_be_submitted"
                ></el-option>
                <el-option
                  label="Review Completion"
                  value="review_completion"
                ></el-option>
                <el-option
                  label="Under Review"
                  value="under_review"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col
              :span="6"
              :offset="18"
              style="text-align: end; padding-top: 10px; padding-right: 10px"
            >
              <el-button
                type="primary"
                size="mini"
                @click="searchForm(searchInfo)"
                >SEARCH</el-button
              >
              <el-button
                type="info"
                size="mini"
                @click="resetForm('searchInfo')"
                >RESET</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <br />
      <el-row>
        <el-col :span="24">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span class="search-card-title">Data Table</span>
                <el-col
                  :span="6"
                  :offset="16"
                  style="text-align: end; padding-right: 10px"
                >
                  <el-button
                    size="medium"
                    type="danger"
                    icon="el-icon-delete"
                    @click="batchDelete()"
                    >Batch Delete</el-button
                  >
                </el-col>
              </div>
            </template>
            <el-table
              :data="tableData1"
              ref="tableData1"
              style="width: 100%"
              row-key="id"
              border
              @selection-change="handleSelectionChange"
              ><el-table-column type="selection" width="45"> </el-table-column>
              <el-table-column prop="number" label="Number" width="180">
              </el-table-column>
              <el-table-column prop="ques_name" label="Ques Name" width="180">
              </el-table-column>
              <el-table-column prop="province" label="Province" width="180">
              </el-table-column>
              <el-table-column
                prop="creat_time"
                label="Creat Time"
                width="180"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="modify_time"
                label="Modify Time"
                width="180"
              >
              </el-table-column>

              <el-table-column prop="reviewers" label="Reviewers" width="180">
              </el-table-column>
              <el-table-column label="State" width="180">
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.state == 'To be Submitted'"
                    type="danger"
                    size="mini"
                    round
                  >
                    To be Submitted
                  </el-button>
                  <el-button
                    v-if="scope.row.state == 'Under Review'"
                    type="warning"
                    size="mini"
                    round
                  >
                    Under Review
                  </el-button>
                  <el-button
                    v-if="scope.row.state == 'Review Completion'"
                    type="success"
                    size="mini"
                    round
                  >
                    Review Completion
                  </el-button>
                </template>
              </el-table-column>

              <el-table-column label="Operations">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-folder-checked"
                    @click="handleDetail(scope.$index, scope.row)"
                    :disabled="scope.row.state =='Review Completion' ? false : true "
                    >Detail</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.$index, scope.row)"
                    :disabled="scope.row.state =='Under Review' ? true : false "
                    >Delete</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    @click="handleModify(scope.$index, scope.row)"
                    :disabled="scope.row.state =='To be Submitted' ? false : true "
                    >Modify</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <br />
            <el-pagination
              :currentPage="pagination.currentPage"
              :page-size="pagination.pageSize"
              :page-sizes="[10, 50, 100, 200]"
              layout="total, sizes, prev, pager, next"
              :total="pagination.totalPages"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [
        {
          id: 1,
          number:"LT-XHDSHD01",
          ques_name: "王小虎",
          province: "山东省",
          creat_time: "2016-05-01",
          modify_time: "2016-05-01",
          reviewers: "赵亦",
          state: "To be Submitted",
        },
        {
          id: 2,
          number:"LT-XHDSHD01",
          ques_name: "张三",
          province: "辽宁省",
          creat_time: "2016-05-01",
          modify_time: "2016-05-01",
          reviewers: "赵亦",
          state: "Review Completion",
        },
        {
          id: 3,
          number:"LT-XHDSHD01",
          ques_name: "赵四",
          province: "上海市",
          creat_time: "2016-05-01",
          modify_time: "2016-05-01",
          reviewers: "赵亦",
          state: "To be Submitted",
          hasChildren: true,
        },
        {
          id: 4,
          number:"LT-XHDSHD01",
          ques_name: "王五",
          province: "陕西省",
          creat_time: "2016-05-01",
          modify_time: "2016-05-01",
          reviewers: "赵亦",
          state: "Under Review",
        },
        {
          id: 5,
          number:"LT-XHDSHD01",
          ques_name: "王五",
          province: "陕西省",
          creat_time: "2016-05-01",
          modify_time: "2016-05-01",
          reviewers: "赵亦",
          state: "Review Completion",
        },
        {
          id: 6,
          number:"LT-XHDSHD01",
          ques_name: "王6",
          province: "陕西省",
          creat_time: "2016-05-01",
          modify_time: "2016-05-01",
          reviewers: "赵亦",
          state: "Under Review",
        },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalPages: 10,
      },
      searchInfo: {
        ques_name: "",
        province: "",
        creat_time: [],
        state: "",
      },
      multipleSelection:[],
    };
  },
  mounted() {

  },
  methods: {
    //查看问卷,问卷的回显
    handleDetail(index, row) {
      this.$router.push("/questionnaireManagement/questionnaireDetail")
      console.log(index, row);
    },
    //删除问卷
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    batchDelete() {
      console.log(this.multipleSelection);
      this.$confirm("此操作将永久删除这些数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改问卷
    handleModify(index, row) {
      this.$router.push("/questionnaireManagement/editQuestionnaire")
      console.log(index, row);
    },
    //多选选中
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    searchForm(formName) {
      //搜索表单信息
      console.log(formName);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>
.box-card {
  width: 90%;
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
  text-align: center;
  margin: auto;
}
.card-header {
  color: #080808;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-card-title {
  font-size: 16px;
  font-weight: 600;
}
.el-card /deep/.el-card__header {
  background-color: #64bbe742;
  padding: 6px;
}
</style>